<script setup>
  import { ref, onMounted } from 'vue'
  import { indexApi } from '@/apis/index'

  // 商品
  const indexDataList = ref([])
  // 轮播图数据
  const imageSwiper = ref([])
  //店铺公告
  const noticeBar = ref({})
  // 广告导航
  const advertisingImg = ref([])
  // 广告图片
  const adImg = ref('')
  //广告
  const adText = ref('')
  //商品列表
  const goodsList = ref([])
  onMounted(() => {
    getIndexData()
  })
  async function getIndexData() {
    const {
      data: { pageData }
    } = await indexApi()
    // console.log(pageData)
    // 轮播图数据
    imageSwiper.value = pageData.items[1].data
    // 店铺公告
    noticeBar.value = pageData.items[2].params.text
    // 广告导航
    advertisingImg.value = pageData.items[3].data
    // 广告图片
    adImg.value = pageData.items[4].data[0].imgUrl
    //广告
    adText.value = pageData.items[5].params.content
    //商品列表
    goodsList.value = pageData.items[6].data
  }

  //点击事件跳转页面
  function onSwitchTab() {
    uni.switchTab({
      url: '/pages/cate/cate'
    })
  }

  //商品详情
  function onGoodsDeatil(id) {
    uni.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    })
  }
</script>

<template>
  <view>
    <!-- 搜索跳转组件 -->
    <search />

    <!-- 轮播图 -->
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        indicator-dots
        autoplay
        interval="2000"
        duration="500"
      >
        <swiper-item v-for="item in imageSwiper" :key="item">
          <view>
            <image
              class="swiper-item-img"
              :src="item.imgUrl"
              mode="widthFix"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 店铺公告 -->
    <view>
      <uni-notice-bar showIcon single scrollable :text="noticeBar">
        123
      </uni-notice-bar>
    </view>

    <!-- 导航组 -->
    <view class="nav-list">
      <view
        class="nav-item"
        v-for="(item, index) in advertisingImg"
        :key="index"
        @click="onSwitchTab"
      >
        <image class="image" mode="widthFix" :src="item.imgUrl"></image>
        <view class="item-text oneline-hide">{{ item.text }}</view>
      </view>
    </view>

    <!-- 广告图片 -->
    <view>
      <image style="width: 100%" mode="widthFix" :src="adImg" />
    </view>
  </view>

  <!-- 广告文字 -->
  <view class="adb" v-html="adText" />

  <!-- 首页商品列表 -->
  <view class="goods-list">
    <view
      @click="onGoodsDeatil(item.goods_id)"
      class="goods-item"
      v-for="(item, index) in goodsList"
      :key="index"
    >
      <view class="item-left">
        <image class="left-image" mode="widthFix" :src="item.goods_image" />
      </view>
      <view class="item-right">
        <view class="goods_title">{{ item.goods_name }}</view>
        <view class="goods_sales">已售{{ item.goods_sales }}件</view>
        <view class="goods_price">
          ￥{{ item.goods_price_min }}
          <view
            class="goods_price_right"
            v-if="item.line_price_max === '0.00'"
          ></view>
          <view class="goods_price_right" v-else>
            {{ '￥' + item.line_price_max }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .swiper {
    height: 360rpx;
    .swiper-item-img {
      width: 100%;
    }
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    .nav-item {
      width: 20%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8rpx;
      margin-bottom: 20rpx;

      .image {
        width: 88rpx;
        height: 88rpx;
      }

      .item-text {
        font-size: 26rpx;
      }
    }
  }

  .goods-list {
    .goods-item {
      display: flex;
      margin-bottom: 20rpx;
      background-color: #fff;
      padding: 20rpx;

      .item-left {
        flex: 2;
        margin-right: 20rpx;

        .left-image {
          width: 100%;
          // 解决图片基线对其的bug
          vertical-align: middle;
        }
      }

      .item-right {
        flex: 3;

        .goods_title {
          display: -webkit-box;
          word-break: break-all;
          text-overflow: ellipsis;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-height: 1.3;
          white-space: normal;
          color: #484848;
          font-size: 26rpx;
          margin-bottom: 10rpx;
        }
        .goods_sales {
          font-size: 12rpx;
          color: #999999;
        }
        .goods_price {
          display: flex;
          align-items: center;
          margin-top: 10rpx;
          color: #f03c3c;
          font-size: 30rpx;
          .goods_price_right {
            color: #999999;
            font-size: 24rpx;
            margin-left: 5rpx;
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>
